import React, {Component, PropTypes} from 'react'
import '../assets/searchbar.less'
/**
 * <SearchBar onConfirm onCancel/> | <SearchBar mode="onchange" onChange/>
 */
class SearchBar extends Component {

  static defaultProps = {
    mode: "enter"
  }

  constructor(props){
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.cancel = this.cancel.bind(this);
  }

    componentDidMount(){
    var value = this.refs.input
    this.props.onFocus(value);
  }

  onKeyDown(e){
    if(e.keyCode === 13){
      this.props.onConfirm(e);
    }
  }

  onChange(e){
    this.props.onChange(e)
  }

  cancel(e){
    this.refs.input.value=""
    var empty=this.refs.input
    //this.props.onConfirm(e);
    this.props.onCancel(e);
  }

  render() {
    const {onCancel,onConfirm,onFocus, ...rest} = this.props;
    const event = this.props.mode === "enter" ? {onKeyDown: this.onKeyDown}:{onChange: this.onChange};
    return (
      <div className="bar bar-header item-input-inset">
        <label className="item-input-wrapper">
          <i className="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="搜索" {...event} {...rest} ref="input"/>
        </label>
        <button className="button button-clear" onClick={this.cancel.bind(this)}>
          取消
        </button>
      </div>
    )
  }
}

SearchBar.propTypes = {};


export default SearchBar
